<template>
  <div class="components-header" v-if="isShowTopNav">
    <!-- <van-nav-bar :title="title">
      <template #left v-if="isShowBack">
        <div class="touch-box" @touchstart="onClickLeft">
          <van-icon name="arrow-left" />
        </div>
      </template>
      <template #right v-if="isShowSearch">
        <div class="touch-box" @touchstart="onClickRight">
          <van-icon name="bars" @touchstart="onClickRight" />
        </div>
      </template>
    </van-nav-bar> -->
    <div class="header">
      <div class="header_left" @click="onClickLeft">
        <van-icon v-if="isShowBack" name="arrow-left" style="margin-left:.2rem;"/>
      </div>
      <div class="center_title">{{title}}</div>
      <div class="header_right">
        <img v-if="isShowSearch" src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight">
      </div>
    </div>
    <div class="fixed-box"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    title() {
      if (this.$route.name == "Mindex") {
        if (process.client) {
          return this.$store.state.web_info.SYSTEM_NAME || "";
        } else {
          return "";
        }
      } else {
        return this.$route.meta.title;
      }
    },
    isShowTopNav() {
      return this.$route.meta.isShowTopNav;
    },
    isShowBack() {
      return this.$route.meta.isShowBack;
    },
    isShowSearch() {
      return this.$route.meta.isShowSearch;
    }
  },
  watch: {},
  methods: {
    onClickLeft() {
      if (this.$route.name == "Mclassify") {
        this.$router.replace("/m/classify");
      } else {
        this.$router.back();
      }
    },
    onClickRight() {
      if (this.$route.path == "/m/course") {
        return this.$router.push("/m/classify");
      }
      this.$router.push("/m/classify?action=search");
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.components-header {
}
</style>
<style lang="scss">
@import "assets/css/root.scss";
.components-header {
  width: 7.2rem;
  // height: 0.8rem;
  // overflow: hidden;
  // z-index: 99999;
  // position: relative;
  .fixed-box {
    width: 7.2rem;
    height: 0.8rem;
  }
  .header{
    width: 7.2rem;
    height: 0.8rem;
    z-index: 2000;
    // z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.8rem;
    background-color: var(--theme-color);
    display: flex;
    align-items: center;
    box-shadow:none;
    .header_left{
      width: 15%;
      background-color: var(--theme-color);
      color: #ffffff;
      // justify-content: center;
      font-size: .35rem;
      display: flex;
      align-items: center;
    }
    .center_title{
      width: 70%;
      text-align: center;
      font-size: 0.3456rem;
      color: #ffffff;
    }
    .header_right{
      width: 15%;
      background:var(--theme-color);
      // background: #fff;
      
      img{
        margin: 0 auto;
        display: block;
        width: 0.6111rem;
        height: 0.6111rem;
      }
    }
  }
  .van-nav-bar {
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 7.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: var(--theme-color);
    .van-nav-bar__arrow {
      font-size: 0.35rem;
    }
    .van-nav-bar__left,
    .van-nav-bar__right {
      padding: 0;
      .touch-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.67rem;
        height: 100%;
        > i {
          font-size: 0.35rem;
          color: #fff;
        }
      }
    }
    .van-nav-bar__text {
      font-size: 0.24rem;
    }
    .van-nav-bar__title {
      font-size: 0.28rem;
      color: #fff;
    }
  }
}
</style>
